<template>
  <a-modal
    :visible="show"
    width="60vw"
    min-height="60vh"
    title="变更日志"
    @ok="handleOk"
    @cancel="handleCancle"
    :maskClosable="false"
    :key="show"
  >
    <a-form-model
      ref="ruleForm"
      :model="changeLogs"
      style="margin-top: 10px"
      label-width="160px"
      label-position="right"
    >
      <a-form-model-item label="请选择变更编号:">
        <a-select
          v-model="changeNo"
          placeholder="请选择变更编号"
        >
          <a-select-option v-for="(item,key, index) in changeLogs" :key="'changeNo_' + index" :value="key">
            {{ key }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <ul class="record-container">
      <li v-if="baseInfoChangeLog.length > 0">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="基本信息">
            <a-timeline>
              <a-timeline-item v-for="log in baseInfoChangeLog" v-bind:key="log.id">
                <div>
                  {{ log.userName + ' ' + log.logContent }}
                </div>
                <div>{{ log.logTime }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-collapse-panel>
        </a-collapse>
      </li>
      <li v-if="valueTestChangeLog.length > 0">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="价值表核心力值">
            <a-timeline>
              <a-timeline-item v-for="log in valueTestChangeLog" v-bind:key="log.id">
                <div>
                  {{ log.userName + ' ' + log.logContent }}
                </div>
                <div>{{ log.logTime }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-collapse-panel>
        </a-collapse>
      </li>
      <li v-if="timeChangeLog.length > 0">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="时间表">
            <a-timeline>
              <a-timeline-item v-for="log in timeChangeLog" v-bind:key="log.id">
                <div>
                  {{ log.userName + ' ' + log.logContent }}
                </div>
                <div>{{ log.logTime }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-collapse-panel>
        </a-collapse>
      </li>
      <li v-if="teamChangeLog.length > 0">
        <a-collapse v-model="activeKey">
          <a-collapse-panel header="团队表">
            <a-timeline>
              <a-timeline-item v-for="log in teamChangeLog" v-bind:key="log.id">
                <div>
                  {{ log.userName + ' ' + log.logContent }}
                </div>
                <div>{{ log.logTime }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-collapse-panel>
        </a-collapse>
      </li>
      <li v-if="attachChangeLog.length > 0">
        <a-collapse v-model="activeKey">
          <a-collapse-panel header="上传附件">
            <a-timeline>
              <a-timeline-item v-for="log in attachChangeLog" v-bind:key="log.id">
                <div>
                  {{ log.userName + ' ' + log.logContent }}
                </div>
                <div>{{ log.logTime }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-collapse-panel>
        </a-collapse>
      </li>
    </ul>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      activeKey: '1',
      changeNo:"",
      changeLogs: {}
    }
  },
  computed: {
    baseInfoChangeLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      return this.changeLogs[this.changeNo].filter(l => l.changeTarget === 1)
    },
    timeChangeLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      return this.changeLogs[this.changeNo].filter(l => l.changeTarget === 3)
    },
    teamChangeLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      return this.changeLogs[this.changeNo].filter(l => l.changeTarget === 4)
    },
    changeValueLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      return this.changeLogs[this.changeNo].filter(l => l.changeTarget === 5)
    },
    valueTestChangeLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      let changeValueLog = this.changeLogs[this.changeNo].filter(l => l.changeTarget === 5)
      let changeCoreLog = this.changeLogs[this.changeNo].filter(l => l.changeTarget === 6)
      changeValueLog = changeValueLog.concat(changeCoreLog)
      changeValueLog.sort(function(a, b) {
        return b.id - a.id
      })
      return changeValueLog
    },
    attachChangeLog() {
      if(!this.changeLogs[this.changeNo]){
        return []
      }
      return this.changeLogs[this.changeNo].filter(l => l.changeTarget === 7)
    }
  },
  methods: {
    init(activeKey, changeNo, changeLogs) {
      this.activeKey = activeKey
      this.changeNo = changeNo
      this.changeLogs = changeLogs
      this.show = true
    },
    handleOk() {
      this.handleCancle()
    },
    handleCancle() {
      this.show = false
    }
  }
}
</script>
